<template>
	<a-layout-content class="wrapper">
		<div class="cardbox flex flex-v">
			<div class="main-wrapper flex-1">
				<a-tabs default-active-key="1" tab-position="left" :tabBarStyle="{ width: '200px' }">
					<a-tab-pane key="1" tab="个人信息">
						<div
							class="account-settings-info-view"
							style="padding: 40px 0 0; overflow: hidden auto; height: 500px"
						>
							<a-row :gutter="16" type="flex">
								<a-col :order="isMobile ? 2 : 1" :md="24" :lg="16">
									<a-form
										:form="form"
										autocomplete="off"
										:labelCol="labelCol"
										:wrapperCol="wrapperCol"
									>
										<a-form-item label="账户"
											><a-input v-decorator="['username']" placeholder="请输入你的账户" disabled
										/></a-form-item>
										<a-form-item label="姓名">
											<a-input
												v-decorator="[
													'realName',
													{ rules: [{ required: true, message: '请输入你的姓名' }] },
												]"
												placeholder="请输入你的姓名"
											/>
										</a-form-item>
										<!-- <a-form-item label="手机">
											<a-input
												v-decorator="['phone', { rules: [{ required: true, message: '请输入手机号' },{ pattern: /^1[0-9]{10}$/, message: '请填写正确的手机号码' }], trigger: 'input' }]"
												placeholder="请输入你的手机号码"
											/>
										</a-form-item>
										<a-form-item label="邮箱">
											<a-input v-decorator="['email', { rules: [{ type: 'email', message: '请输入正确的邮箱!' }] }]" placeholder="请输入你的邮箱" />
										</a-form-item> -->
										<a-form-item :wrapper-col="{ span: 14, offset: 5 }">
											<a-button type="primary" @click="saveUserInfo" :loading="confirmLoading"
												>确定</a-button
											>
											<a-button class="ant-btn-yellow ml10" @click="cancel">关闭</a-button>
										</a-form-item>
									</a-form>
								</a-col>
								<!-- <a-col :order="1" :md="24" :lg="8" :style="{ minHeight: '180px' }">
									<div class="ant-upload-preview flex align-center" @click="$refs.modal.edit(avatar)">
										<a-icon type="cloud-upload-o" class="upload-icon" />
										<div class="mask" :class="{ active: !userinfo.compressAvatar }"><a-icon type="plus" /></div>
										<img :src="fileUrl+userinfo.compressAvatar" v-if="userinfo.compressAvatar" />
									</div>
								</a-col> -->
							</a-row>
						</div>
					</a-tab-pane>
					<a-tab-pane key="2" tab="修改密码">
						<div style="padding: 40px 0 0">
							<changePwd :username="userinfo.username"></changePwd>
						</div>
					</a-tab-pane>
				</a-tabs>
			</div>
		</div>
		<avatar-modal ref="modal" @uploadImg="setavatar" />
	</a-layout-content>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { mapActions, mapState, mapMutations } from 'vuex';
import { ModalMixins } from '@/mixins';
import AvatarModal from '@/components/AvatarModal';
import changePwd from './changePwd';
import bus from '@/utils/eventBus';
export default {
	data() {
		return {
			avatar: '',
			//previewAvatar:'',
			userinfo: {},
			fileUrl: process.env.VUE_APP_FILE_API,
		};
	},
	mixins: [ModalMixins],
	computed: {
		...mapState(['isMobile']),
	},
	components: { AvatarModal, changePwd },
	mounted() {},
	created() {
		this.getUserInfo();
	},
	methods: {
		...mapMutations(['SET_USER_INFO']),
		setavatar(pic, previewUrl) {
			//this.avatar = previewUrl;
			this.avatar = pic;
			this.editUserInfo({
				avatar: pic,
				userId: this.userinfo.userId,
				phone: this.userinfo.phone,
			});
		},
		getUserInfo() {
			this.$postAction(this.$api.getUserInfo).then((da) => {
				if (da.code == 1) {
					this.userinfo = { ...da.data };
					this.$ls.set('userInfo', da.data);
					this.SET_USER_INFO(da.data);
					this.$nextTick(() => {
						this.form.setFieldsValue(this.$pick(this.userinfo, 'username', 'realName', 'phone', 'email'));
					});
				}
			});
		},
		saveUserInfo() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					let { username, realName, email, phone } = values;
					let parameter = {
						userId: this.userinfo.userId,
						username,
						realName,
						email,
						phone,
					};
					this.editUserInfo(parameter);
				}
			});
		},
		editUserInfo(parameter) {
			this.confirmLoading = true;
			this.$postAction(sysManageapi.userUrl.updateInfo, parameter)
				.then((res) => {
					if (res && res.code == 1) {
						this.$message.success('保存成功');
						this.getUserInfo();
					}
				})
				.finally(() => {
					this.confirmLoading = false;
				});
		},
		/* 点击取消关闭页面 */
		cancel() {
			bus.$emit('closePage');
		},
	},
};
</script>

<style lang="less" scoped>
.wrapper {
	position: relative;
	padding: 0;
	height: 100%;
	background: #f5f9ff;
	.cardbox {
		padding: 10px 0;
		overflow: auto;
		height: 100%;
		/deep/ .main-wrapper {
			background: #fff;
			box-shadow: 0 0 10px rgba(181, 181, 181, 0.5);
			margin-bottom: 10px;
			border-radius: 2px;
			overflow: hidden;
			margin: 10px 8px 0;
			padding: 16px 0;
		}
		/deep/.ant-tabs {
			height: 100%;
			.ant-tabs-left-content {
				height: 100%;
				// .ant-tabs-tabpane{
				// 	height: 100%;
				// }
			}
		}
	}
}
.ant-upload-preview {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 180px;
	height: 180px;
	border-radius: 50%;
	box-shadow: 0 0 4px #ccc;

	.upload-icon {
		position: absolute;
		top: 0;
		right: 10px;
		font-size: 1.4rem;
		padding: 0.5rem;
		background: rgba(222, 221, 221, 0.7);
		border-radius: 50%;
		border: 1px solid rgba(0, 0, 0, 0.2);
	}
	.mask {
		opacity: 0;
		position: absolute;
		background: rgba(0, 0, 0, 0.4);
		cursor: pointer;
		transition: opacity 0.4s;
		&.active {
			opacity: 1 !important;
		}
		&:hover {
			opacity: 1;
		}

		i {
			font-size: 2rem;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -1rem;
			margin-top: -1rem;
			color: #d6d6d6;
		}
	}

	img,
	.mask {
		width: 100%;
		max-width: 180px;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}
	.upload-img {
		font-size: 80px;
		text-align: center;
	}
}
</style>
